@import 'postlist.styl'
// layout into two columns
.columns, .left-column, .main-column, .right-column
  display: block
  padding: 0.5rem 0.25rem
.left-column
  .sticky-tablet > div
    margin-bottom: 0.8rem
@media screen and (min-width: 862px)
  .columns
    display: flex
  .left-column, .right-column
    width: (1 / 3) * 100%
  .left-column
    order: 1
  .main-column
    order: 2
    width: (2 / 3) * 100%
.right-column
  display: none
// big screen layout, layout into three columns
@media screen and (min-width: 1280px)
  .left-column .display-when-two-columns, .widescreen-archive
    display: none
  .main-column
    width: 52%
  .left-column, .right-column
    width: 24%
  .right-column
    order: 3
    display: block
// sticky aside
@media screen and (min-width: 1280px)
  .sticky-widescreen
    position: -webkit-sticky
    position: sticky
    top: 1.5rem
@media screen and (min-width: 862px)
  .columns, .left-column, .main-column, .right-column
    padding: 0.75rem
  .sticky-tablet
    position: -webkit-sticky
    position: sticky
    top: 1.5rem
  .left-column
    .sticky-tablet > div
      margin-bottom: 1.5rem
